<template>
	<div id="orderSeePage">
		<div class="header">
			<!--商户
			<el-select v-model="orderInfo.businessId" clearable placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>-->
			
			支付方式
			<el-select v-model="orderInfo.payType" clearable placeholder="请选择">
				<el-option v-for="item in payType" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			订单状态
			<el-select v-model="orderInfo.status" clearable placeholder="请选择">
				<el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div class="header">
			起始时间
			<div class="block">
				<el-date-picker v-model="orderInfo.beginTime" type="datetime" placeholder="选择日期时间" class="width1">
				</el-date-picker>
			</div>
			结束时间
			<div class="block ">
				<el-date-picker v-model="orderInfo.endTime" type="datetime" placeholder="选择日期时间" class="width1">
				</el-date-picker>
			</div>
			
			客户订单号
			<el-input v-model="orderInfo.outOrderNo" placeholder="请输入完整会员号" class="width1"></el-input>
		</div>
		<div class="header">
			平台订单号
			<el-input v-model="orderInfo.orderNo" placeholder="请输入完整订单号" class="width1"></el-input>
			上一个订单号
			<el-input v-model="orderInfo.upOrderNo" placeholder="请输入完整订单号" class="width1"></el-input>
			<el-button type="primary" size="mini" @click="queryOrderList">查询</el-button>
			
		</div>
		<el-row class="orderCheck header">
			<!--<el-col :span="4">订单数量：<mark v-text="total" style="padding: 2px 10px"></mark>单</el-col>-->
			<!--<el-col :span="4">成功数量：<span>100</span>单</el-col>
			<el-col :span="4">待支付数量：<span>100</span>单</el-col>
			<el-col :span="4">订单总额：<span>100</span>元</el-col>
			<el-col :span="4">成功总额：<span>100</span>元</el-col>
			<el-col :span="4">待支付总额：<span>100</span>元</el-col>-->
		</el-row>
		<el-table :data="tableData" stripe style="width: 100%" v-loading="loading1">
			<el-table-column prop="username" label="用户名" >
			</el-table-column>
			<el-table-column prop="businessName" label="商户名">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="amount" label="金额">
			</el-table-column>
			<el-table-column prop="orderNo" label="订单号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="payType" label="支付类型">
			</el-table-column>
			<el-table-column prop="status" label="状态">
			</el-table-column>
		</el-table>
		<div class="block" style="text-align: right;">

			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="orderInfo.pageNumber" :page="orderInfo.pageNumber" :total="total"  :page-size="orderInfo.pageSize">
			</el-pagination>

		</div>
	</div>
</template>

<script>
	import dateformat from 'dateformat'
	export default {
		name: "orderSee",
		data() {
			return {
				value1: "",
				loading1:false,
				payType:[{
					value: 1,
					label: '支付宝扫码'
				},
				{
					value: 2,
					label: '支付宝wap'
				},
				{
					value: 3,
					label: '京东支付'
				},
				{
					value: 4,
					label: 'QQ支付'
				},
				{
					value: 5,
					label: '快捷支付'
				},
				{
					value: 6,
					label: '微信扫码'
				},
				{
					value: 7,
					label: '微信扫码'
				},],
				orderType: [{
					value: 1,
					label: '待发起'
				}, {
					value: 3,
					label: '待支付'
				}, {
					value: 4,
					label: '支付成功'
				},
				 {
					value: 5,
					label: '交易完成'
				},
				 {
					value: 6,
					label: '已结算'
				}],
				value4: '',
				
				tableData: [{
					username:"test",
					businessName:"test",
					createTime:'21212312333',
					amount:"100",
					orderNo:12333,
					payType:"test",
					status:'1'
				}],
				orderInfo:{
					
					beginTime:"",
					endTime:'',
//					businessId:'',
					status:'',
					payType:'',
					outOrderNo:'',
					orderNo:'',
					upOrderNo:'',
					pageSize:6,
					pageNumber:1
				},
				total:1
			}
		},
		created(){
		
			this.queryOrderList()
		},
		methods:{

//			getBusinessList() {
//				this.loading1 = true;
//				let _this = this;
//				this.$api.getBusinessList(this.$route.query.groupId, {
//					pageSize: this.pageSize,
//					pageNumber: this.pageNumber
//				}).then(res => {
//					if(res.data.code == '000000') {
//						_this.loading1 = false;
//						_this.businessList = res.data.data.list;
//						_this.total = res.data.data.totalRow;
//						console.log(res.data)
//					}
//				})
//			},
           queryOrderList(){
           	this.loading1  =true;
           	 this.orderInfo.beginTime = Date.parse(this.orderInfo.beginTime);
           	  this.orderInfo.endTime = Date.parse(this.orderInfo.endTime);
           	      let params = {};
			    Object.assign(params,this.orderInfo);
			    for(let item in params){
			    	
			    	if(params[item] == ''){
			    		
			    		delete params[item];
			    	}
			    	if(isNaN(params[item])){
			    		delete params[item];
			    	}
			    }
           	 this.$api.getOrderList(params).then(res =>{
           	 	if(res.data.code == '000000'){
           	 		console.log(res.data);
           	 	 this.total=	res.data.data.totalRow;
           	 	 this.loading1  =false;
           	 	 	
           	 	 this.tableData =res.data.data.list;
           	 	 this.tableData.forEach(item =>{
           	 	 	if(item.createTime  || item.finishTime){
								let date = new Date(item.createTime);
								item.createTime = dateformat(date,'yyyy-mm-dd HH:MM:ss')
							};
					switch (item.payType){
						case 1: item.payType = '支付宝扫码'; break;
						case 2: item.payType = '支付宝wap';  break;
						case 3: item.payType = '京东支付';  break;
						case 4: item.payType = 'QQ支付';  break;
						case 5: item.payType = '快捷支付';  break;
						case 6: item.payType = '微信扫码';  break;
						case 7: item.payType = '微信H5';  break;
						default : break;
					};
					switch (item.status){
						case 1: item.status = '待发起'; break;
						case 3: item.status = '待支付';  break;
						case 4: item.status = '支付成功';  break;
						case 5: item.status = '交易完成';  break;
						case 6: item.status = '已结算';  break;
						
						default : break;
					};
							
           	 	 })
           	 	  this.$message({
                        	type:'success',
                        	message:'查询成功'
                        })
           	 	}else{
           	 		 this.$message({
                        	type:'error',
                        	message:'查询失败'
                        })
           	 		  this.loading1  =false;
           	 	}
           	 	
           	 }).catch(() => {
           	 	 this.$message({
                        	type:'error',
                        	message:'查询失败'
                        })
           	 	  this.loading1  =false;
           	 })
           },
           handleCurrentChange(val){
           	this.orderInfo.pageNumber = val;
           this.queryOrderList()
           }
		}
	}
</script>

<style lang="less">
	#orderSeePage {
	
		height: 100%;
		th{
			text-align: center;
		}
		.el-input__inner {
			height: 20px;
			font-size: 12px;
		}
		.el-input {
			width: 110px;
			display: inline-block;
			margin-right: 20px;
				margin-left: 6px;
		}
		.header {
			padding: 18px 40px;
			font-size: 12px;
			white-space: nowrap;
			display: flex;
			justify-content: center;
		}
		.width1 {
			width: 160px;
		}
		.orderCheck {
			font-size: 14px;
		}
	}
</style>